import React, { useState, useEffect } from 'react';
import {
    Button, Cascader, DatePicker, Form, Input,
    InputNumber, Radio, Select, Switch, TreeSelect,
} from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { addshoplists, editshoplist } from '../../store/crmsSlice';

//表单组件 添加和编辑的表单
const MyFrom = (props) => {

    //获取数据
    let obj = useSelector(state => state.crms1)
    //console.log(obj);
    let dispatch = useDispatch()

    //创建from实例
    const [form] = Form.useForm();
    //在初始周期中 获取编辑的数据(数据回显)
    //console.log(props.itemobj);
    useEffect(() => {
        //console.log(from);
        form.setFieldsValue(props.itemobj)
    }, [])


    //表单验证通过的回调
    const onFinish = values => {
        //console.log(values);
        //计算规格 显示对应的数据
        let specification = values.speciType == 1 ? ["全糖", "半糖", "无糖"] : ["加冰", "少冰", "不加冰"]
        //判断是添加还是编辑
        if (props.title == '添加') {
            //添加的对象
            let obj = {
                ...values,
                "specification": specification,
                "id": new Date().getTime()
            }
            //console.log(obj);
            //执行同步添加的方法
            dispatch(addshoplists(obj))
        } else {
            //编辑
            let obj = {
                ...values,
                "specification": specification,
                "id": props.itemobj.id
            }
            //执行编辑的方法
            dispatch(editshoplist(obj))
        }


        //关闭弹层 
        props.onClose()
    };

    return (
        <Form onFinish={onFinish} form={form}>

            <Form.Item label="商品名称" name='title'
                rules={[{ required: true, message: '请输入商品名称' }]}>
                <Input />
            </Form.Item>

            <Form.Item label="商品类型" name='typeId'
                rules={[{ required: true, message: '请选择商品类型' }]}>
                <Select>
                    {
                        obj.typelist.map(item => {
                            return <Select.Option value={item.typeId} key={item.id}>
                                {item.label}
                            </Select.Option>
                        })
                    }
                </Select>
            </Form.Item>

            <Form.Item label="商品价格" name='price'
                rules={[{ required: true, message: '请输入商品价格' }]}>
                <InputNumber />
            </Form.Item>

            <Form.Item label="商品状态" name='Collect'>
                <Switch />
            </Form.Item>


            <Form.Item label="商品规格" name='speciType'
                rules={[{ required: true, message: '请选择商品规格' }]}>
                <Radio.Group
                    options={[
                        { value: 1, label: '可选糖' },
                        { value: 2, label: '可选冰' },
                    ]}
                />
            </Form.Item>

            <Form.Item>
                <Button type='primary' htmlType="submit">完成</Button>
            </Form.Item>
        </Form>
    );
};
export default MyFrom;
